<template>
  <demo-content :title="title">
    <p>
      第一条线段通过
      <code>ctx.moveTo(50, 10); ctx.lineTo(450, 10)</code> 绘制；
    </p>
    <p>
      第二条线段通过
      <code>ctx.moveTo(50.5, 50.5); ctx.lineTo(450.5, 50.5)</code> 绘制；
    </p>
    <p>虽然已经将 lineWidth 设置为了1，但是，第一条线段还是占了2个像素。</p>
    <div>
      <p>
        如果你在某2个像素的边界处绘制
        一条1像素宽的线段，那么该线段实际上会占据2个像素的宽度，如左图所示。<br />
        如果将线段绘制在某2 个像素之间的那个像素中
        <br />
        如果将线段绘制在某2个像素之间，中线左右两端的那半个像素
        就不会再延伸了，它们合起来恰好占据1个像素的宽度，如右图所示。
      </p>
      <img :src="image1" alt="" style="height: 300px; margin: 0 20px" />
      <img :src="image2" alt="" style="height: 300px; margin: 0 20px" />
    </div>

    <canvas ref="canvasRef" width="600" height="400"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import image1 from "./images/boundary-line.png";
import image2 from "./images/boundary-line2.png";

const title = "线段";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(50, 10);
  ctx.lineTo(450, 10);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(50, 50.5);
  ctx.lineTo(450, 50.5);
  ctx.stroke();
});
</script>

<style src="./default.css" scoped></style>
